<template>
  <div>
    <div>
      <!-- 标签导航区 -->
      <div class="main-navigation">
        <button class="navigation-abel" @click="goclass">班级</button>
        <i class="el-icon-arrow-right"></i>
        <button class="navigation-abel">
          {{ stuMessage.stuName }}的成长报告
        </button>
      </div>
      <div class="main-wrap">
        <!--这里是隐藏的菜单项-->
        <el-collapse class="honor-container">
          <el-collapse-item>
            <template slot="title" class="honor-name">
              <div class="img-box">
                <img :src="`${src1 + stuMessage.avatar}`" v-if="stuMessage.avatar != ''" />
                <img src="@/assets/images/boy.png" v-if="stuMessage.sex == 0 && stuMessage.avatar == ''" />
                <img src="@/assets/images/girl.png" v-if="stuMessage.sex == 1 && stuMessage.avatar == ''" />
              </div>
              <div class="template-right">
                <div class="right-top">{{ stuMessage.stuName }}</div>
                <img v-if="stuMessage.sex === '0'" class="gander" src="./images/nanhai1.png" />
                <img v-if="stuMessage.sex === '1'" class="gander" src="./images/nvhai1.png" />
              </div>
              <div class="searchmore">
                查看更多
              </div>
            </template>
            <div class="Information">
              <!--这是存放左边的年级和家长姓名的盒子-->
              <div class="weizhi">
                <div class="hezi3">
                  <div class="box1">
                    <div class="Information-name">班级</div>
                    <div>{{ stuList.班级 }}</div>
                  </div>
                  <div class="box1">
                    <div class="Information-name">
                      家长姓名
                    </div>
                    <div class="name1">
                      {{ stuList.nick_name }}
                    </div>
                  </div>
                </div>
              </div>
              <!--这是存放中间的年级和家长姓名的盒子-->
              <div class="weizhi3">
                <div class="person1">个人信息</div>
                <div class="box1">
                  <div class="Information-name">
                    手机号
                  </div>
                  <div class="name1">
                    {{ stuList.phonenumber }}
                  </div>
                </div>
              </div>
              <!--这是存放右边的年级和家长姓名的盒子-->
              <div class="weizhi2">
                <div class="box1">
                  <div class="Information-name">身份证</div>
                  <div>{{ stuMessage.idCard }}</div>
                </div>
                <div class="box1">
                  <div class="Information-name">
                    家长身份
                  </div>
                  <div class="name1">
                    {{ stuList.relation }}
                  </div>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
        <!-- 总的成长报告的盒子 -->
        <div class="Box">
          <!-- 制作中的成长报告 -->
          <div class="report1" :key="index" v-for="(item, index) in reportListmake">
            <div class="box" @click="goMake(item)">
              <div class="word">
                <div class="word1">
                  <span class="year">{{ item.semesterName }}</span>
                </div>
              </div>
              <div class="photo">
                <div class="photo1">
                  <img src="../../../assets/images/growReport.jpg" />
                  <div class="state">
                    <span class="state1">制作中</span>
                  </div>
                  <div class="Info">
                    <span class="name">{{ item.stuName }} </span>
                    <span class="lesson">{{ item.gradeId }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 已完成的成长报告 -->
          <div class="report1" v-for="(item, index) in reportListfinish" :key="index">
            <div class="box" @click="goDefine(item)">
              <div class="word">
                <div class="word1">
                  <span class="year">{{ item.semesterName }}</span>
                </div>
              </div>
              <div class="photo">
                <div class="photo1">
                  <img src="../../../assets/images/growReport.jpg" />
                  <div class="state">
                    <span class="state1">已定稿</span>
                  </div>
                  <div class="Info">
                    <span class="name">{{ item.stuName }} </span>
                    <span class="lesson">{{ item.gradeId }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import module from "@/allurlimg/img";
import childNavigation from "../../components/background/childNavigation";
import {
  getRport,
  getGradeId,
  getstudentImation,
  getclassId,
} from "@/api/luoc.api/luo4.js";
export default {
  data () {
    return {
      src1: "",
      stuId: "",
      reportList: [],
      localhostList: [],
      reportListmake: [],
      reportListfinish: [],
      studentId: [],
      gradeId: "",
      data: [],
      //学生列表
      stuList: [],
      stuLiast: [],
      gradeList: [],
      stuId: window.location.search.substring(4),
    };
  },
  onLoad (option) {
    id: option.id;
    this.stuId = id;
  },
  components: {
    childNavigation,
  },
  mounted () {
      window.onbeforeunload = function (e) {
        var storage = window.localStorage;
        storage.clear()
      }
    },
  methods: {
    goclass(){
      this.$router.push('/goclass')
    },
    //跳转路由
    goDefine (e) {
      console.log(e)
      this.$router.push({
        name: "defineluo",
        params: {
          studentId: e.studentId,
          growthId: e.growthId,
          semesterName: e.semesterName,
          stuName: this.stuMessage.stuName,
        },
      });
    },
    goMake (e) {
      console.log(e)
      this.$router.push({
        name: "makeluo",
        params: {
          studentId: e.stuId,
          growthId: e.growthId,
          semesterName: e.semesterName,
          stuName: this.stuMessage.stuName,
        },
      });
    },
    async gets () {
      this.stuMessage = JSON.parse(localStorage.getItem("stuMessage"));
      const res = await getRport({ stuId: this.stuMessage.stuId });
      console.log(res.data, "reportList");
      // 0 1 制作中 2 定稿
      for (var i = 0; i < res.data.length; i++) {
        if (res.data[i]["status"] == 2) {
          this.reportListfinish.push(res.data[i]);
        } else {
          this.reportListmake.push(res.data[i]);
        }
      }
    },

    async getGradeId () {
      const res = await getGradeId({});
      this.gradeList = res.data;
    },

    //以下是需要gradeId的值才可进行获取数据，具体的gradeId还得先再去获取postId
    async getclassStudents () {
      const res = await getstudentImation({ gradeId: this.gradeId });
      this.stuLiast = res.rows[0].stuName;
      this.studentId = res.rows;
    },

    async getthisclassId () {
      if (this.stuMessage.stuId !== undefined) {
        const res = await getclassId(this.stuMessage.stuId);
        this.stuList = res.data;
        this.xueshengName = this.stuMessage.stuName;
      }
    },
  },
  //页面挂载时钩子
  created () {
    this.src1 = module.host;
    this.stuList = JSON.parse(localStorage.getItem("stuList"));
    this.stuMessage = JSON.parse(localStorage.getItem("stuMessage"));
    this.localhostList = JSON.parse(localStorage.getItem("localhostList"));
    this.stuMessage = this.$route.query.stuMessage;
    this.stuId = this.stuMessage.stuId;
    this.getthisclassId();
    this.gets();
    // this.getGradeId();
    // this.getclassStudents();
  },
};
</script>


<style scoped >
/*包含全部报告的内容区*/
.Box {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
/*内容区域的盒子 */
.box {
  display: flex;
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 0.625rem;
  width: 100%;
  height: 25rem;
}
.report1 {
  margin: 2.8125rem 0rem 0rem 2.75rem;
  height: 20rem;
  width: 17.5rem;
}
.icon {
  height: 6.25rem;
  margin-top: 1rem;
  margin-left: 68.75rem;
}
.img-box {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.img-box > img {
  height: 100%;
  width: 100%;
}
/*孩子姓名导航*/
/* 头部导航区内容 */
.header1 {
  position: relative;
  height: 3.125rem;
  margin: 0rem 14.375rem 0rem 14.375rem;
}

/* 导航区 */
.header-navigation1 {
  position: absolute;
  left: 0;
}

/* 标签导航区 */
.navigation-ecah1 {
  font-size: 1.25rem;
  border: 0rem solid;
  margin: 1.25rem 0rem 0 1.25rem;
  background: #ffffff;
}

.show {
  color: #7c0000;
  padding-bottom: 0.3125rem;
  border-bottom: 0.1875rem solid #7c0000;
}

/*一个成长报告*/
/*文字背景框*/
.word {
  height: 18.75rem;
  width: 2.625rem;
  background: #f5f5f5;
}
/*文字框*/
.word1 {
  display: flex;
  width: 1.625rem;
  line-height: 1.875rem;
  margin-left: 0.3125rem;
  margin-right: 0.8125rem;
  text-align: center;
}
/*文字*/
.year {
  margin-top: 0.625rem;
  font-size: 1rem;
  color: #7c0000;
  writing-mode: vertical-lr; /* 文字垂直展示 */
  text-orientation: upright; /* 数字垂直展示 */
  text-align: center; /* 字题上下居中 */
  letter-spacing: 1.25rem; /* 字间距 */
}
/*照片框*/
.photo {
  border: 0.0625rem solid #7c0000;
  border-style: dashed;
  height: 18.5rem;
  width: 13.5625rem;
  margin-left: 1.0625rem;
}
/*包括学期和成长报告的盒子*/
.box {
  display: flex;
  width: 26%;
  position: relative;
}
/*成长报告封面照片*/
.photo img {
  height: 18.375rem;
  width: 13.4375rem;
}
/*完成状态*/
.state {
  background: #f2e5e5;
  border-radius: 0.25rem;
  width: 3.625rem;
  height: 1.5625rem;
  text-align: center;
  position: absolute;
  z-index: 2;
  top: 8.9375rem;
  right: 0.875rem;
}
/*文字制作中*/
.state1 {
  font-size: 0.875rem;
  line-height: 1.5625rem;
}
/*包成长报告和里面文字的盒子 */
.photo1 {
  position: relative;
}
/*学生信息*/
.photo1 .Info {
  position: absolute;
  bottom: 3.125rem;
  right: 1.25rem;
  width: 2.5rem;
  flex-wrap: wrap;
}
.name {
  font-size: 0.25rem;
  width: 60%;
}
.lesson {
  display: flex;
  font-size: 0.25rem;
  width: 12.5rem;
}

/*实现点击滑动功能 */
.el-carousel__item h3 {
  color: #ffffff;
  font-size: 1.125rem;
  opacity: 0.75;
  line-height: 18.75rem;
  margin: 0rem;
  width: 58.75rem;
  height: 56.25rem;
}

.el-carousel__item:nth-child(2n) {
  display: flex;
  background-color: #ffffff;
  width: 58.75rem;
  height: 43.75rem;
  flex-wrap: wrap;
}

.gander {
  width: 4rem;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #ffffff;
  height: 43.75rem;
  display: flex;
  flex-wrap: wrap;
}

.lunbo {
  width: 62.5rem;
  height: 43.75rem;
  margin-left: 6.25rem;
  text-align: center;
  margin-top: 1.25rem;
}

.el-carousel__arrow {
  top: 125%;
}
.main-wrap {
  width: 68.5rem;
  margin: 0 auto;
}
.el-collapse {
  border: 1px solid #e6ebf5 !important;
  padding: 1rem;
}

.el-collapse-item >>> .el-collapse-item__header {
  height: unset;
  border-bottom-color: transparent;
}
.el-collapse-item >>> .el-collapse-item__wrap {
  border-bottom-color: transparent;
}
/* .el-collapse-item__header {
  display: flex;
  align-items: center;
  height: unset !important;
  line-height: 48px;
  background-color: #ffffff;
  color: #303133;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: border-bottom-color 0.3s;
  outline: none;
} */
.honor-container {
  display: flex;
  margin: 3.125rem 0;
}

.honor-name {
  display: flex;
  flex-direction: row;
}

.el-collapse-item {
  width: 100%;
}

.template-left {
  width: 5rem;
  height: 5rem;
  display: flex;
  margin: 0.625rem;
  border-radius: 50%;
}
.template-right {
  width: 5rem;
  height: 5rem;
  display: flex;
  flex-direction: column;
  margin: 0.625rem;
}

.Information {
  display: flex;
  flex-direction: row;
  margin-top: 1.25rem;
  font-weight: bold;
  font-size: 0.9375rem;
  justify-content: space-between;
}

.Information-name1 {
  position: relative;
  text-align: center;
  font-weight: bold;
  font-size: 1.25rem;
}

.weizhi {
  width: 25%;
  position: relative;
  flex-direction: row;
  text-align: left;
}

.weizhi2 {
  width: 25%;
  /* margin-left: 12.5rem; */
  position: relative;
  text-align: right;
}

.weizhi3 {
  width: 25%;
  /* margin-left: 12.5rem; */
  position: relative;
  text-align: center;
}

.hezi3 {
  position: relative;
}

.box1 {
  display: flex;
  margin-top: 1.25rem;
  justify-content: space-between;
}

.name1 {
  /* margin-top: 0.625rem; */
}

.person1 {
  font-size: 1.5625rem;
}
.main-navigation {
  margin: 1.25rem;
  display: flex;
  margin: 0 28.125rem 0 28.125rem;
  flex-direction: row;
}
.icon-shouye-copy {
  color: rgb(202, 160, 166);
  font-size: 1.5625rem;
  margin-right: 0.1875rem;
}
.icon-right-1-copy {
  color: darkgray;
  font-size: 1.5625rem;
  padding: 0.4375rem;
}
.navigation-abel1 {
  width: 6.25rem;
  border-radius: 1.5625rem;
  border: 0rem;
  padding: 0.625rem;
  line-height: 0.9375rem;
  font-size: 1.25rem;
}

/* 导航标签 */
.navigation-abel {
  line-height: 1.5625rem;
  font-size: 1.25rem;
  border-radius: 1.5625rem;
  padding: 0.5rem 1.3125rem 0.5rem 1.375rem;
  border: 0rem;
  background: #f2e5e5;
}

.searchmore{
  margin-left: 48.875rem;
}
</style>